<template>
  <div class="login">
    <!-- 
      <vue-particles
        color="#fff" //默认'#dedede'。粒子颜色
        :particleOpacity="0.7" //默认0.7。粒子透明度
        :particlesNumber="60"//默认80。粒子数量
        shapeType="circle"//默认'circle'。可用的粒子外观类型有："circle圆","edge正方形","triangle三角形", "polygon五边形","star五角星"
        :particleSize="4"//默认80。单个粒子大小
        linesColor="#fff"//默认'#dedede'。线条颜色
        :linesWidth="1"//默认1。线条宽度
        :lineLinked="true"//默认true。连接线是否可用
        :lineOpacity="0.4"//默认0.4。线条透明度
        :linesDistance="150"//默认150。线条距离
        :moveSpeed="2"//默认3。粒子运动速度
        :hoverEffect="true"//默认true。是否有hover特效
        hoverMode="grab"//默认true。可用的hover模式有: "grab", "repulse", "bubble"
        :clickEffect="true"//默认true。是否有click特效
        clickMode="push"//默认true。可用的click模式有: "push", "remove", "repulse", "bubble"
        class="lizi"
      >
 -->

    <!-- 粒子效果实现 -->
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="star"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    />

    <div class="loginPart">
      <h2>用户登录</h2>
      <el-form
        :model="user"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            v-model.trim="user.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            placeholder="请输入密码"
            v-model.trim="user.password"
            show-password
            @keyup.enter.native="handleLogin('ruleForm')"
          ></el-input>
        </el-form-item>
        <div id="btn">
          <el-button
            type="primary"
            @click="handleLogin('ruleForm')"
            :loading="btnLoading"
          >登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </el-form>

    </div>
  </div>
</template>


<script>
import { getEncryptedString } from '@/api/login';
import { encryptCBC } from '@/util/aes';
import { mapActions } from 'vuex';
import { timeFix } from '@/util/util';
export default {
  name: 'UserLogin',
  data() {
    return {
      btnLoading: false,
      user: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions('user', ['Login']),
    // 登录方法
    handleLogin(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let encryptedRes = await getEncryptedString();
          // debugger;
          if (encryptedRes.code != 200) {
            this.alertErr('获取加密key失败：' + encryptedRes.message);
            return;
          }
          //获取aes加密key
          let password = encryptCBC(
            this.user.password,
            encryptedRes.data.key,
            encryptedRes.data.iv
          );
          this.btnLoading = true;
          this.Login({
            username: this.user.username,
            password: password,
          })
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                //登录成功
                this.$router.push('/home');
                this.$notify({
                  title: '欢迎',
                  message: `${timeFix()}，欢迎回来`,
                });
              } else {
                this.alertErr('登录失败，', res.message);
              }
            })
            .catch((err) => {
              console.log(err);
              this.alertErr('登录异常：' + err.message);
            })
            .finally(() => {
              this.btnLoading = false;
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    alertErr(msg) {
      this.$message.error(msg);
    },
  },
};
</script>

<style>
.lizi {
  width: 100%;
  height: 99%;
  position: absolute;
  left: 0;
  top: 0;
  /* z-index: -1; */
  background-image: radial-gradient(#002953, #041222);
}

.login {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.login__particles {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('@/assets/backgroud.jpg');
  opacity: 0.8;
  position: fixed;
  /* 去掉监听事件 */
  pointer-events: none;
}
.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 50%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  /*背景颜色为黑色，透明度为0.8*/
  background: rgba(255, 204, 255, 0.3);
  /*box-sizing设置盒子模型的解析模式为怪异盒模型， 将border和padding划归到width范围内*/
  box-sizing: border-box;
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  /*边框圆角，四个角均为15px*/
  border-radius: 15px;
}
.demo-ruleForm label {
  color: white;
}
h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}
#btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>@/util/aes